<template>
  <div>
    <a-card style="padding: 2%">
      <h1 style="font-size: 28px">后台管理系统 - 欢迎登录</h1>
      <a-button class="buttonType" type="primary" @click="onPush">
        {{ buttonTitle1 }}
      </a-button>
      <br/><br/>
      <a-button class="buttonType" type="primary" @click="onWebsocket">
        {{ buttonTitle2 }}
      </a-button>
      <br/><br/>
      <a-upload-dragger
        :file-list="fileList"
        :before-upload="beforeUpload"
        :multiple="false"
        style="width: 40%"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined/>
        </p>
        <p class="ant-upload-text"> 点击或拖拽文件 </p>
        <p class="ant-upload-hint"> 支持*.cap格式的文件上传 </p>
      </a-upload-dragger>
      <br/><br/>
      <a-button class="buttonType" type="primary" @click="onFileUpload">
        {{ buttonTitle3 }}
      </a-button>
      <br/><br/>
      <a-button class="buttonType" type="primary" @click="onFileDownload">
        {{ buttonTitle4 }}
      </a-button>
      <br/><br/>
      <a-button class="buttonType" type="primary" @click="onMqttTest">
        {{ buttonTitle5 }}
      </a-button>
    </a-card>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref, toRefs} from '@vue/runtime-core';
import {useRouter} from 'vue-router';
import {message, Modal} from 'ant-design-vue';
import {WebsocketService} from '/@/services/websocket/websocket.service';
import {MqttService} from "/@/services/mqtt/mqtt.service";
import {CoreUtils} from "/@/utils/coreUtils";
import AButton from "/@/components/Button/src/BasicButton.vue";

export default defineComponent({
  components: {AButton},
  setup() {
    const buttonTitle1 = ref('');
    const buttonTitle2 = ref('');
    const buttonTitle3 = ref('');
    const buttonTitle4 = ref('');
    const buttonTitle5 = ref('');
    const fileList = ref([] as any[]);
    const router = useRouter();

    onMounted(() => {
      buttonTitle1.value = '路由跳转示例';
      buttonTitle2.value = 'Websocket示例';
      buttonTitle3.value = '文件上传示例';
      buttonTitle4.value = '文件下载示例';
      buttonTitle5.value = "MQTT示例"
    });

    const onPush = () => {
      router.push({path: '/dashboard'});
    };

    const onWebsocket = () => {
      WebsocketService.getVersion()
        .then((result) => {
          message.success(('版本：' + result) as string);
        })
        .catch((e) => {
          message.error(e);
        });
    };

    const onMqttTest = () => {
      MqttService.connect();
    };

    const beforeUpload = (file: any) => {
      const fileName = file.name as string;
      CoreUtils.console_log(file);
      CoreUtils.console_log(-1 == fileName.indexOf('.cap', 0));
      fileList.value = [file];
      return false;
    };

    const onFileUpload = () => {
      if (fileList.value.length > 0) {
        const uploadFile = fileList.value[0] as any;
        const formData = new FormData();
        formData.append('app_file', uploadFile);
        fileList.value = [];
        CoreUtils.console_log(formData);
        message.info('文件名：' + uploadFile.name + ' / 文件大小：' + uploadFile.size);
      } else {
        message.error('未检测到文件！');
      }
    };

    const onFileDownload = () => {
      WebsocketService.downloadPackage();
    };

    return {
      buttonTitle1,
      buttonTitle2,
      buttonTitle3,
      buttonTitle4,
      buttonTitle5,
      fileList,
      beforeUpload,
      onPush,
      onWebsocket,
      onMqttTest,
      onFileUpload,
      onFileDownload,
    };
  },
});
</script>

<style scoped>
.buttonType {
  width: 140px;
}
</style>
